<!-- 实时流量 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0;">
      <el-row>
        <!-- <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset"/> -->
        <el-col :xs="24" :sm="24" :lg="24">
          <linechart title="最近一小时流量曲线" :name="Name" :chart-data="lineChartData" @setTimer='setTimer'/>
        </el-col>
      </el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding-right: 8px;margin: 0px 0 32px;">
        <!-- <span class="title">终端信息列表</span> -->
        <el-table  :data="tableData" :row-class-name="rowClassName" :row-style="rowStyle" style="width: 100%;z-index:1000; margin-top: 15px" >
          <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
          <el-table-column label="采集时间" prop="TransTime" align="left" width="180"></el-table-column>
          <!-- <el-table-column label="终端名称" show-overflow-tooltip prop="Name" align="left"></el-table-column> -->
          <el-table-column label="终端地址" show-overflow-tooltip prop="Ip" align="left"></el-table-column>
          <el-table-column label="实时流量" align="center">
            <el-table-column label="下载速率" prop="DownRate" align="left"></el-table-column>
            <el-table-column label="上传速率" prop="UpRate" align="left"></el-table-column>
          </el-table-column>
          <el-table-column label="最近10秒流量" align="center">
            <el-table-column label="下载流量" prop="DownByte" align="left"></el-table-column>
            <el-table-column label="上传流量" prop="UpByte" align="left"></el-table-column>
          </el-table-column>
          <el-table-column label="操作" align="left" width="80px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      top="5vh"
      v-el-drag-dialog
      >
      <el-row style="background: #fff; padding: 16px 16px 0;">
        <el-row>
          <el-col :xs="24" :sm="24" :lg="24">
            <linechart Action="2" title="实时流量趋势" :name="Name" :chart-data="DialoglineChartData"/>
          </el-col>
        </el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding-right: 8px;margin: 0px 0 32px;">
          <!-- <span class="title">终端信息列表</span> -->
          <el-table  :data="DialogTableData" :row-class-name="rowClassName" :row-style="rowStyle" style="width: 100%;z-index:1000; margin-top: 15px" >
            <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
            <el-table-column label="采集时间" prop="TransTime" align="left" width="180"></el-table-column>
            <el-table-column label="终端名称" show-overflow-tooltip prop="Name" align="left"></el-table-column>
            <el-table-column label="终端地址" show-overflow-tooltip prop="Ip" align="left"></el-table-column>
            <el-table-column label="实时流量" align="center">
              <el-table-column label="下载速率" prop="DownRate" align="left"></el-table-column>
              <el-table-column label="上传速率" prop="UpRate" align="left"></el-table-column>
            </el-table-column>
            <el-table-column label="最近10秒流量" align="center">
              <el-table-column label="下载流量" prop="DownByte" align="left"></el-table-column>
              <el-table-column label="上传流量" prop="UpByte" align="left"></el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--底部分割线 -->
        <el-divider class="lineToFooter"></el-divider>
      <span slot="footer" class="dialog-footer" style="padding: 0 30px 20px !important;">
        <el-button type="primary" @click="dialogVisible = false;">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage.js"
import connsearch from "@/components/connSearch";
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import linechart from "./components/linechart.vue";
import conntable from "./components/conntable.vue";
import { getNowDay, parseTime, bytesToSize } from "@/utils/index.js";
export default {
  directives: { elDragDialog },
  components: { connsearch, linechart, conntable },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      dialogTitle:'',
      dialogVisible: false,
      Name:'',
      time: 15000,
      tableData: [],
      DialogTableData: [],
      DialoglineChartData: {
        time:[],
        expectedData: [],
        actualData: []
      },
      lineChartData: {
        time:[],
        expectedData: [],
        actualData: []
      },
      rowIndex:'',
      searchform: {},
      formOptions:[
        {
          col: 8,
          label: '日期', // label文字
          prop: 'timeRange', // 字段名
          element: 'el-date-picker', // 指定elementui组件
          type: '' // 日期选择类型,
        }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    let xTime = new Date(new Date().setHours(0, 0, 0, 0))
    let arr = [ parseTime(xTime), '']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.$set(this.searchform,'timeRange', arr)
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.settime()
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    async handleEdit(row){
      this.dialogTitle = row.Name + '的详情'
      const data = {
        Filter: {
          Name: row.Name
        }
      }
      const res = await connrequest('GetShadowStreamLog', data)
      let UpByte = []
      let downByte = []
      let time = []
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        time.push(parseTime(item.TransTime, '{h}:{i}:{s}'))
        UpByte.push((item.UpRate / 1000).toFixed(2))
        downByte.push((item.DownRate / 1000).toFixed(2))
        item.DownRate = bytesToSize(item.DownRate) + '/S'
        item.UpRate = bytesToSize(item.UpRate) + '/S'
        item.DownByte = bytesToSize(item.DownByte)
        item.UpByte = bytesToSize(item.UpByte)
        return item
      })
      this.DialoglineChartData = {time,UpByte,downByte}
      this.DialogTableData = res.Data
      this.dialogVisible = true
    },
    rowStyle ({ row, rowIndex }) {
      if (this.rowIndex === rowIndex) {
        return {
          'background-color': '#ffeecf !important'
        }
      }
    },
    rowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    setTimer(val){
      clearInterval(this.timer);
      this.time = val * 1000
      this.settime()
    },
    settime(){
      this.timer = setInterval(this.getData, this.time)
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchform = val
      this.getData()
    },
    // 重置
    reset(){
      let endTime = new Date().getTime()
      let xTime = new Date(new Date().setHours(0, 0, 0, 0))
      // let arr = [ parseTime(xTime), parseTime(endTime)]
      let arr = [ parseTime(xTime), '']
      this.pageNum = 1
      this.formOptions = this.formOptions.map( item => {
        if(item.label === "日期"){
          item.initValue = arr
        }
        return item
      })
      this.$set(this.searchform,'timeRange', arr)
      this.$refs.connsearch.addInitValue()
      this.getData()
    },
    async getlineData(){
      // 默认取60分钟前
      let date = new Date()
      let i = date.getMinutes()
      let StartTime = parseTime(date.setMinutes( i - 60 ),'{y}-{m}-{d} {h}:{i}:{s}')
      let UpByte = []
      let downByte = []
      let time = []
      const data = {
        Filter: {
          // StartTime: this.searchform.timeRange?.[0] ||  StartTime,
          StartTime: StartTime,
          Name: this.Name === '全部终端' ? '' : this.Name
        }
      }
      const res = await connrequest('GetHistorySumStreamLog', data)
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        time.push(parseTime(item.TransTime, '{h}:{i}:{s}'))
        UpByte.push(item.UpRate)
        downByte.push(item.DownRate)
        return item
      })
      this.lineChartData = {time,UpByte,downByte}
    },
    async getData(){
      const data = {
        Filter: {
          StartTime: getNowDay('time'),
          EndTime: '',
          SumCount: 9
        }
      }
      const res = await connrequest('GetLastShadowStream', data)
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        item.DownRate = bytesToSize(item.DownRate) + '/S'
        item.UpRate = bytesToSize(item.UpRate) + '/S'
        item.DownByte = bytesToSize(item.DownByte)
        item.UpByte = bytesToSize(item.UpByte)
        return item
      })
      this.Name = res.Data[0]?.Name || ''
      this.tableData = res.Data
      this.getlineData()
    },
    tableClick(row){
      this.rowIndex = row.index
      this.Name = row.Name
      this.getlineData()
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
// ::v-deep .el-table__body tr:hover>td{
//   background-color: #ffeecf!important;
// }
// ::v-deep .el-table__body tr.current-row>td{
//   background-color: #ffeecf!important;
// }

</style>
